@use '../abstracts/variables' as *;

.btn-welcome{
    width: 4rem;
    height: 1.2rem;

    font-size: .4rem;
    color: $color-black;
}

.btn-label{
    position: relative;
    width: 2.8rem;
    min-height: .8rem;
    background: linear-gradient(to right top, rgba($color-primary, 0.2),
    rgba($color-primary, 0.5),
    rgba($color-primary, 0.6));
    font-size: 14px;
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);  // 上梯形的剪裁
    transition: all 0.3s ease-in-out;

     // 创建内部阴影和边框效果
     &::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba($color-primary, 0.3);
        transition: all 0.3s ease-in-out;
        opacity: 0;

    }

    &.active {
        // 激活时的样式
        color: $color-primary-dark;
        background: linear-gradient(to right top, 
            rgba($color-primary-light, 0.3),
            rgba($color-primary-light, 0.4),
            rgba($color-primary-light, 0.5)
        );
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.2),
            0 1px 2px rgba(0,0,0,0.1);
        
        // 内部凹陷效果
        &::before {
            opacity: 1;
            transform: scale(0.95);
        }

        // 轻微缩放效果
        transform: translateZ(20px);
    }
}